<template>
  <div>
    <el-table
      height="500"
      :data="props.tableData"
      :loading="props.loading"
      @selection-change="handlesomeclick"
    >
      <el-table-column v-if="props.deletSome" type="selection" width="55" align="center" />
      <el-table-column
        v-for="(col, index) in props.columns"
        :key="index"
        :prop="col.prop"
        :label="col.label"
        show-overflow-tooltip
        align="center"
      >
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column fixed="right" label="操作" min-width="120" align="center">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button link type="primary" size="small" @click="handleDelete(scope.row)">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="handleCheckInfo(scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { defineProps, defineEmits, onMounted, watch } from 'vue'
const props = defineProps({
  columns: {
    type: Array,
    required: true,
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  loading: {
    type: Boolean,
    default: false,
  },
  deletSome: {
    type: Boolean,
    default: true,
  },
})

const emits = defineEmits(['delete'])

// 处理编辑
const handleEdit = (row) => {
  console.log('Edit row:', row)
  emits('editRow', row)
  // 这里可以实现编辑逻辑
}
function handlesomeclick(row) {
  emits('somedelete', row)
}
// // watch(props.tableData, (newVal) => {
//   console.log("父组件 tableData 变化:", newVal);
// }, { deep: true });
// 处理删除
const handleDelete = (row) => {
  emits('delete', row)
}

// 处理详情
const handleCheckInfo = (row) => {
  emits('checkinfo', row)
}

onMounted(() => {
  console.log(props.tableData, '子组件的值', props.columns)
})
</script>

<style scoped>
.text-danger {
  color: #f56c6c;
}
</style>
